<template>
  <form class="ad-form">
    <slot name="header"></slot>
    <div class="actual-form">
      <slot name="content"></slot>
    </div>
  </form>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.ad-form {
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  transition: opacity 0.02s 0.4s;
}
@media (max-width: 850px) {
  .ad-form {
    max-width: revert;
    padding: 1rem 2.5rem 1rem;
    transition: transform 0.8s ease-in-out, opacity 0.45s linear;
  }
}
</style>
